<template>
  <view class="container">
    <!-- 首页 -->
    <view v-if="currentTab === 0" class="home-page">
      <!-- 顶部导航栏 -->
      <view class="header">
        <text class="header-title">随机起名助手</text>
        <!-- <uni-icons type="gear" size="24" color="#666" class="cursor-pointer" @click="handleSettings"></uni-icons> -->
      </view>

      <!-- 主要内容区域 -->
      <scroll-view class="main-content" scroll-y>
        <!-- 姓氏输入框 -->
        <view class="input-section">
          <text class="section-title">姓氏</text>
          <input 
            class="surname-input" 
            v-model="surname" 
            placeholder="请输入姓氏"
            maxlength="2"
          />
        </view>

        <!-- 性别选择 -->
        <view class="gender-section">
          <text class="section-title">性别</text>
          <view class="gender-buttons">
            <view 
              class="gender-btn cursor-pointer"
              :class="{ active: selectedGender === 'male' }"
              @click="selectGender('male')"
            >
              <uni-icons type="person" size="20" color="#4A90E2"></uni-icons>
              <text>男</text>
            </view>
            <view 
              class="gender-btn cursor-pointer"
              :class="{ active: selectedGender === 'female' }"
              @click="selectGender('female')"
            >
              <uni-icons type="person-filled" size="20" color="#FF6B9D"></uni-icons>
              <text>女</text>
            </view>
          </view>
        </view>

        <!-- 起名风格选择 -->
        <view class="style-section">
          <text class="section-title">起名风格</text>
          <view class="style-options">
            <view 
              v-for="style in nameStyles" 
              :key="style.value"
              class="style-option cursor-pointer"
              :class="{ active: selectedStyles.includes(style.value) }"
              @click="toggleStyle(style.value)"
            >
              <text>{{ style.label }}</text>
            </view>
          </view>
        </view>

        <!-- 开始起名按钮 -->
        <button 
          class="generate-btn cursor-pointer" 
          @click="generateNames"
          :disabled="!surname"
        >
          开始起名
        </button>

        <!-- 名字展示区域 -->
        <view v-if="generatedNames.length > 0" class="names-display">
          <text class="section-title">为您推荐的名字</text>
          <view class="names-grid">
            <view 
              v-for="(name, index) in generatedNames" 
              :key="index"
              class="name-card"
            >
              <view class="name-content">
                <text class="full-name">{{ surname }}{{ name.name }}</text>
                <text class="name-meaning">{{ name.meaning }}</text>
              </view>
              <view class="name-actions">
                <uni-icons 
                  type="heart" 
                  size="20" 
                  :color="name.isFavorite ? '#FF6B9D' : '#ccc'"
                  class="cursor-pointer"
                  @click="toggleFavorite(index)"
                ></uni-icons>
                <uni-icons 
                  type="paperclip" 
                  size="20" 
                  color="#4A90E2"
                  class="cursor-pointer"
                  @click="copyName(surname + name.name)"
                ></uni-icons>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 取名记录页面 -->
    <view v-if="currentTab === 1" class="records-page">
      <!-- 顶部导航栏 -->
      <view class="header">
        <text class="header-title">取名记录</text>
        <uni-icons type="funnel" size="24" color="#666" class="cursor-pointer" @click="handleFilter"></uni-icons>
      </view>

      <!-- 记录列表 -->
      <scroll-view class="records-content" scroll-y>
        <view v-if="nameRecords.length === 0" class="empty-state">
          <uni-icons type="document" size="60" color="#ccc"></uni-icons>
          <text class="empty-text">暂无取名记录</text>
        </view>
        
        <view v-for="(group, date) in groupedRecords" :key="date" class="record-group">
          <text class="date-header">{{ date }}</text>
          <view 
            v-for="record in group" 
            :key="record.id"
            class="record-item"
          >
            <view class="record-content">
              <text class="record-name">{{ record.fullName }}</text>
              <view class="record-meta">
                <text class="record-time">{{ record.time }}</text>
                <view class="gender-tag" :class="record.gender">
                  {{ record.gender === 'male' ? '男' : '女' }}
                </view>
              </view>
            </view>
            <view class="record-actions">
              <uni-icons 
                v-if="record.isFavorite"
                type="heart-filled" 
                size="18" 
                color="#FF6B9D"
              ></uni-icons>
              <uni-icons 
                type="trash" 
                size="18" 
                color="#FF4757"
                class="cursor-pointer"
                @click="deleteRecord(record.id)"
              ></uni-icons>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 我的页面 -->
    <view v-if="currentTab === 2" class="profile-page">
      <!-- 个人信息区 -->
      <view class="profile-header">
        <image 
          class="avatar" 
          src="https://readdy.ai/api/search-image?query=icon%2C%203D%20cartoon%20style%20user%20avatar%2C%20friendly%20smiling%20person%20with%20simple%20features%2C%20clean%20minimalist%20design%2C%20soft%20pastel%20colors%2C%20rounded%20shapes%2C%20isolated%20on%20white%20background%2C%20centered%20composition%2C%20subject%20fills%2080%20percent%20of%20frame%2C%20no%20text%2C%20modern%20digital%20art%20style&width=80&height=80&seq=avatar001&orientation=squarish"
        ></image>
        <view class="user-info">
          <text class="username">{{ userInfo.nickname }}</text>
        <!--  <view class="member-status">
            <text class="member-tag">{{ userInfo.memberType }}</text>
          </view> -->
        </view>
      </view>

      <!-- 功能列表 -->
      <scroll-view class="profile-content" scroll-y>
        <view class="menu-section">
          <view 
            v-for="item in menuItems" 
            :key="item.id"
            class="menu-item cursor-pointer"
            @click="handleMenuClick(item.id)"
          >
            <view class="menu-left">
              <uni-icons :type="item.icon" size="24" :color="item.color"></uni-icons>
              <text class="menu-text">{{ item.title }}</text>
            </view>
            <uni-icons type="right" size="16" color="#ccc"></uni-icons>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 底部导航栏 -->
    <view class="tab-bar">
      <view 
        v-for="(tab, index) in tabs" 
        :key="index"
        class="tab-item cursor-pointer"
        :class="{ active: currentTab === index }"
        @click="switchTab(index)"
      >
        <uni-icons :type="tab.icon" size="24" :color="currentTab === index ? '#4A90E2' : '#999'"></uni-icons>
        <text class="tab-text" :style="{ color: currentTab === index ? '#4A90E2' : '#999' }">{{ tab.title }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 0,
      surname: '',
      selectedGender: 'male',
      nameStyles: [
        { label: '现代', value: 'modern' },
        { label: '古风', value: 'ancient' },
        { label: '文艺', value: 'literary' },
        { label: '诗意', value: 'poetic' },
        { label: '简约', value: 'simple' },
        { label: '大气', value: 'grand' }
      ],
      selectedStyles: ['modern'],
      generatedNames: [],
      nameRecords: [
        {
          id: 1,
          fullName: '张雨萱',
          time: '14:30',
          gender: 'female',
          isFavorite: true,
          date: '2025-01-18'
        },
        {
          id: 2,
          fullName: '张浩然',
          time: '10:15',
          gender: 'male',
          isFavorite: false,
          date: '2025-01-18'
        },
        {
          id: 3,
          fullName: '李诗涵',
          time: '16:45',
          gender: 'female',
          isFavorite: true,
          date: '2025-01-17'
        }
      ],
      userInfo: {
        nickname: '起名达人',
        memberType: '普通会员'
      },
      userStats: {
        totalGenerated: 128,
        totalFavorites: 36,
        daysUsed: 15
      },
      menuItems: [
        { id: 'feedback', title: '意见反馈', icon: 'chatbubble', color: '#2ED573' },
        { id: 'about', title: '隐私政策', icon: 'info', color: '#FFA726' }
      ],
      tabs: [
        { title: '首页', icon: 'home' },
        { title: '记录', icon: 'list' },
        { title: '我的', icon: 'person' }
      ]
    }
  },
  computed: {
    groupedRecords() {
      const groups = {}
      this.nameRecords.forEach(record => {
        const date = record.date
        if (!groups[date]) {
          groups[date] = []
        }
        groups[date].push(record)
      })
      return groups
    }
  },
  methods: {
    switchTab(index) {
      this.currentTab = index
    },
    selectGender(gender) {
      this.selectedGender = gender
    },
    toggleStyle(style) {
      const index = this.selectedStyles.indexOf(style)
      if (index > -1) {
        if (this.selectedStyles.length > 1) {
          this.selectedStyles.splice(index, 1)
        }
      } else {
        this.selectedStyles.push(style)
      }
    },
    generateNames() {
      if (!this.surname) return
      const maleNames = [
        { name: '浩然', meaning: '正大刚直，胸怀宽广' },
        { name: '子轩', meaning: '气宇轩昂，才华横溢' },
        { name: '志远', meaning: '志向远大，前程似锦' },
        { name: '晨阳', meaning: '朝气蓬勃，阳光开朗' },
        { name: '文博', meaning: '博学多才，文质彬彬' }
      ]
      const femaleNames = [
        { name: '雨萱', meaning: '清新脱俗，如花似玉' },
        { name: '诗涵', meaning: '诗情画意，内涵丰富' },
        { name: '梦琪', meaning: '美梦成真，珍贵如玉' },
        { name: '语嫣', meaning: '巧笑嫣然，语若天籁' },
        { name: '思雅', meaning: '思维敏捷，举止优雅' }
      ]
      const names = this.selectedGender === 'male' ? maleNames : femaleNames
      this.generatedNames = names.map(name => ({
        ...name,
        isFavorite: false
      }))
      // 添加到记录
      const newRecord = {
        id: Date.now(),
        fullName: this.surname + names[0].name,
        time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }),
        gender: this.selectedGender,
        isFavorite: false,
        date: new Date().toISOString().split('T')[0]
      }
      this.nameRecords.unshift(newRecord)
    },
    toggleFavorite(index) {
      this.generatedNames[index].isFavorite = !this.generatedNames[index].isFavorite
    },
    copyName(name) {
      uni.setClipboardData({
        data: name,
        success: () => {
          uni.showToast({
            title: '已复制到剪贴板',
            icon: 'success'
          })
        }
      })
    },
    deleteRecord(id) {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这条记录吗？',
        success: (res) => {
          if (res.confirm) {
            const index = this.nameRecords.findIndex(record => record.id === id)
            if (index > -1) {
              this.nameRecords.splice(index, 1)
            }
          }
        }
      })
    },
    handleSettings() {
      uni.showToast({
        title: '设置功能开发中',
        icon: 'none'
      })
    },
    handleFilter() {
      uni.showToast({
        title: '筛选功能开发中',
        icon: 'none'
      })
    },
    handleMenuClick(id) {
      console.log(id,'2222')
      if(id == 'feedback'){
        uni.navigateTo({
            url: '/pages/index2'
          })
      }else if(id == "about"){
        uni.navigateTo({
            url: '/pages/index3'
          })
      }
      // uni.showToast({
      //   title: id + ' 功能开发中',
      //   icon: 'none'
      // })
    }
  },
  mounted() {
    // 初始化数据
  }
}
</script>

<style>
page {
  height: 100%;
}

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f8f9fa;
}

.cursor-pointer {
  cursor: pointer;
}

/* 通用样式 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx 32rpx 24rpx;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}

.header-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
}

.main-content,
.records-content,
.profile-content {
  flex: 1;
  min-height: 0;
  padding: 32rpx;
  width: 100%;
  box-sizing: border-box;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 24rpx;
  display: block;
}

/* 首页样式 */
.home-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 90%;
}

.input-section {
  margin-bottom: 48rpx;
}

.surname-input {
  width: 100%;
  height: 88rpx;
  background-color: #fff;
  border: 2px solid #e9ecef;
  border-radius: 16rpx;
  padding: 0 24rpx;
  font-size: 32rpx;
  color: #333;
  box-sizing: border-box;
}

.surname-input:focus {
  border-color: #4A90E2;
}

.gender-section {
  margin-bottom: 48rpx;
}

.gender-buttons {
  display: flex;
  gap: 24rpx;
}

.gender-btn {
  flex: 1;
  height: 88rpx;
  background-color: #fff;
  border: 2px solid #e9ecef;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16rpx;
  transition: all 0.3s ease;
}

.gender-btn.active {
  border-color: #4A90E2;
  background-color: #f0f7ff;
}

.gender-btn text {
  font-size: 28rpx;
  color: #666;
}

.gender-btn.active text {
  color: #4A90E2;
}

.style-section {
  margin-bottom: 48rpx;
}

.style-options {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.style-option {
  padding: 16rpx 32rpx;
  background-color: #fff;
  border: 2px solid #e9ecef;
  border-radius: 32rpx;
  font-size: 28rpx;
  color: #666;
  transition: all 0.3s ease;
}

.style-option.active {
  border-color: #4A90E2;
  background-color: #f0f7ff;
  color: #4A90E2;
}

.generate-btn {
  width: 100%;
  height: 96rpx;
  background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
  color: #fff;
  border: none;
  border-radius: 16rpx;
  font-size: 32rpx;
  font-weight: 600;
  margin: 0 0 48rpx 0;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.generate-btn:disabled {
  background: #ccc;
}

.names-display {
  margin-bottom: 32rpx;
}

.names-grid {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.name-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.name-content {
  flex: 1;
}

.full-name {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
}

.name-meaning {
  font-size: 26rpx;
  color: #666;
  display: block;
}

.name-actions {
  display: flex;
  gap: 24rpx;
  align-items: center;
}

/* 记录页面样式 */
.records-page {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 0;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-top: 24rpx;
}

.record-group {
  margin-bottom: 48rpx;
}

.date-header {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 24rpx;
  display: block;
}

.record-item {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 16rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.record-content {
  flex: 1;
}

.record-name {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
}

.record-meta {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.record-time {
  font-size: 24rpx;
  color: #999;
}

.gender-tag {
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  font-size: 20rpx;
  color: #fff;
}

.gender-tag.male {
  background-color: #4A90E2;
}

.gender-tag.female {
  background-color: #FF6B9D;
}

.record-actions {
  display: flex;
  gap: 16rpx;
  align-items: center;
}

/* 我的页面样式 */
.profile-page {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.profile-header {
  background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
  padding: 48rpx 32rpx;
  display: flex;
  align-items: center;
  gap: 32rpx;
  flex-shrink: 0;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  border: 4rpx solid rgba(255, 255, 255, 0.3);
}

.user-info {
  flex: 1;
}

.username {
  font-size: 36rpx;
  font-weight: 600;
  color: #fff;
  display: block;
  margin-bottom: 12rpx;
}

.member-status {
  display: flex;
  align-items: center;
}

.member-tag {
  padding: 8rpx 16rpx;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 16rpx;
  font-size: 24rpx;
  color: #fff;
}

.menu-section {
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 32rpx;
  overflow: hidden;
}

.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx;
  border-bottom: 1px solid #f0f0f0;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-left {
  display: flex;
  align-items: center;
  gap: 24rpx;
}

.menu-text {
  font-size: 30rpx;
  color: #333;
}

.stats-section {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
}

.stats-grid {
  display: flex;
  justify-content: space-around;
  margin-top: 24rpx;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
}

.stat-number {
  font-size: 40rpx;
  font-weight: 600;
  color: #4A90E2;
}

.stat-label {
  font-size: 24rpx;
  color: #666;
}

/* 底部导航栏 */
.tab-bar {
  display: flex;
  background-color: #fff;
  border-top: 1px solid #f0f0f0;
  padding: 16rpx 0 32rpx;
  flex-shrink: 0;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
}

.tab-text {
  font-size: 24rpx;
}

.tab-item.active .tab-text {
  font-weight: 600;
}
</style>
